<template>
    <div class="insurance claim">
        <van-nav-bar
                title="理赔中心"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="card-list">
            <div class="top-btn">
                <van-cell-group>
                    <van-field readonly clickable label="筛选" :value="companyName" placeholder="--请选择--"
                               @click="companyPicker = true"/>
                </van-cell-group>
                <van-popup v-model="companyPicker" position="bottom">
                    <van-picker show-toolbar value-key="name" :columns="companyList" @cancel="companyPicker = false"
                                @confirm="onCompany"/>
                </van-popup>

                <div class="btn">
                    <div @click="addClaim">新增报案</div>
                </div>
            </div>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
                    <div v-for="(item,index) in listSource" :key="index" class="card">
                        <div class="card-top" :style="{backgroundImage: 'url(' + imgUrl1 + ')'}">
                            <div class="card-title">
                                <div>{{item.company_name}}</div>
                                <div class="">{{item.worker_name}}</div>
                            </div>
                            <div class="single-line">理赔编号：{{item.claim_number}}</div>
                            <div class="single-line">联系电话：{{item.contact_phone}}</div>
                            <div class="single-line">身份证号：{{item.work_card_number}}</div>
                            <div class="single-line">理赔状态：{{item.claim_status_text}}</div>
                        </div>
                        <div class="card-btn" :style="{backgroundImage: 'url(' + imgUrl2 + ')' }">
                            <div @click="goDetail(item)">查看详情</div>
                            <div @click="goEditorInfo(item)">编辑信息</div>
                            <div @click="goMaterials(item)">材料编辑</div>
                            <div @click="goEditorStatus(item)">修改状态</div>
                        </div>
                        <div class="pop-window" v-if="isPop">
                            <div class="pop-box">
                                <img src="../../assets/icon/del_btn.png" alt="">
                                <div class="tishi-text">您确认要开票吗？</div>
                                <div class="confirm-btn" @click="confirmInvoice(item)">确定</div>
                                <img src="../../assets/icon/close_btn.png" alt="" @click="isPop=false">
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
<!--        <footer-item></footer-item>-->
    </div>
</template>

<script>
    import footerItem from '@/components/footer.vue'

    export default {
        name: "claim",
        components: {footerItem},
        data() {
            return {
                listSource: [],
                page: 1,
                limit: 10,
                isLoading: false,
                imgUrl1: require('../../assets/img/card_bg1.png'),
                imgUrl2: require('../../assets/img/card_bg2.png'),
                list: [],
                loading: false,
                finished: false,
                isPop: false,
                button1: false,

                companyPicker: false,
                companyName: '',
                company_id: '',
                companyList: [],
            }
        },
        methods: {
            onRefresh() {
                this.page = 1;
                this.onLoad("refresh");
            },
            onCompany(value) {
                this.companyName = value.name;
                this.company_id = value.key;
                this.companyPicker = false;
                this.onRefresh();
            },
            // 新增报案
            addClaim(item) {
                this.$router.push(`/addClaim?id=${item.id}`)
            },
            // 查看详情
            goDetail(item) {
                this.$router.push(`/editorClaim?id=${item.id}`)
            },
            // 编辑信息
            goEditorInfo(item) {
                this.$router.push(`/setClaim?id=${item.id}`)
            },
            // 材料编辑
            goMaterials(item) {
                this.$router.push(`/upInfoClaim?id=${item.id}`)
            },
            // 修改状态
            goEditorStatus(item) {
                this.$router.push(`/changeStatusClaim?id=${item.id}`)
            },
            onLoad(type) {
                let params = {
                    limit: this.limit,
                    page: this.page,
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    claim_status: this.company_id,
                };
                this.$post("/api/compensate_order/index", params)
                    .then(res => {
                        if (res.code == 1) {
                            if (type == "refresh") {
                                this.listSource = res.data.dataList;
                                this.isLoading = false;
                                this.finished = false;
                            } else {
                                this.listSource = this.listSource.concat(
                                    res.data.dataList
                                );
                            }
                            this.loading = false;
                            this.page++;
                            if (res.data.dataList.length < this.limit) {
                                this.finished = true;
                            }
                        }
                    })
                    .catch(err => {
                    });
            },
            getCompany(type) {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                };
                this.$post("/api/compensate_order/claim_status_list", params)
                    .then(res => {
                        if (res.code == 1) {

                            let item = [{
                                name: '全部',
                                key: ''
                            }];
                            this.companyName = '全部'
                            this.companyList = item.concat(res.data)
                        } else {
                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => {
                    });
            },
            showPop(item) {
                if (item.is_invoice == 2) {
                    return
                }
                this.isPop = true
            },
            // 确认开票
            confirmInvoice(item) {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    member_goods_id: item.id,
                    cate_id: 4,
                }
                this.$post("/api/finance/confirm_billing", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.isPop = false
                        }
                    })
                    .catch(err => {
                    });
            },
            goOrderPage(index) {
                let id = this.listSource[index].id
                this.$router.push(`/kfOrderInfo?id=${id}`)
            },
            goConfirmMoney(item) {
                this.$router.push(`/jrFinancialConfirmMoney?id=${item.id}`)
            },
            goBillingInfo(item) {
                this.$router.push(`/jrFinancialBillingInfo?id=${item.id}`)
            },
        },
        created() {
            this.button1 = this.$queryMenu('Finance/hr')
            this.getCompany()
        },
    }
</script>
<style scoped lang="less">
    .card-list {
        padding: 16px;

        .card {
            /*height: 200px;*/
            position: relative;
            color: #fff;
            margin-bottom: 15px;

            .card-top {
                display: flex;
                flex-wrap: wrap;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                padding: 20px 30px;
                border-radius: 8px 8px 0 0;

                .card-title {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 13px;

                    > div:nth-of-type(1) {
                        font-size: 16px;
                        font-weight: bold;
                        flex: 1;
                        padding-right: 10px;
                    }

                    > div:nth-of-type(2) {
                        font-size: 12px;
                        padding-left: 10px;
                    }
                }

                .mtext-line {
                    width: 50%;
                    font-size: 13px;
                    flex-wrap: wrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .single-line {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    font-size: 13px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;

                    margin-bottom: 10px;
                }

                > .mtext-line:not(:last-child) {
                    margin-bottom: 10px;
                }
            }

            .card-btn {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding-left: 0;
                padding: 5px 0;
                bottom: 8px;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                div {
                    height: 35px;
                    width: 135px;
                    margin: 5px 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    opacity: 0.8;
                    color: #366cb3;
                    border-radius: 5px;
                    font-size: 14px;
                }

                .gray-color {
                    background: #c8c8c8;
                    color: #fff;
                }
            }
        }
    }

    .pop-window {
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;

        .pop-box {
            width: 80vw;
            height: 233px;
            margin-left: 10vw;
            background: #fff;
            border-radius: 5px;
            margin-top: 50%;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-top: 45px;
            position: relative;

            > img:nth-of-type(1) {
                width: 69px;
                height: 69px;
            }

            > img:nth-of-type(2) {
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: -45px;
            }

            .tishi-text {
                font-size: 17px;
                color: #333333;
                padding: 20px 0;
            }

            .confirm-btn {
                width: 150px;
                height: 45px;
                background-image: linear-gradient(-83deg, #e61a1a 0%, #f33e3e 100%),
                linear-gradient(#ff6766, #ff6766);
                background-blend-mode: normal, normal;
                border-radius: 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fefefe;
                font-size: 16px;
            }
        }
    }

    .top-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn {
            > div {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                height: 2rem;
                margin: 0.3125rem;
                padding: 0 10px;
                background-image: linear-gradient(90deg, #f54a51 0%, #b62e34 100%);
                border-radius: 0.3125rem;
                font-size: 14px;
            }
        }
    }
</style>